<template>
	<view class="control">
		<u-swiper height="180" :list="list3" indicator indicatorMode="line" circular></u-swiper>
		<view class="box-1 flex-between">
			<view class="con">
				<view class="title">三宫综合排练厅(2楼)</view>
				<view class="flex-align">
					<view class="con-1 flex-align">
						<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8445445b01038fa665feb14cf325600f2fbb87e9.png"></image>
						<text>2500人容纳</text>
					</view>
					<view class="con-2 elipsis-1">
						排练厅面积398m²,外厅面积330m²
					</view>
				</view>
			</view>
			<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ad06fa11d77df613e97d665f0dd7b7d4d960729b.png"></image>
		</view>
		<view class="box-2">
			<view class="con-1 flex-align" @click="show = true">
				<view>上一月</view>
				<view class="now">2020年3月</view>
				<view>下一月</view>
			</view>
			<view class="con-2 flex-align">
				<view class="td " v-for="item in weekList" :key="item">
					{{item}}
				</view>
			</view>
			<view class="con-3" style="padding-bottom: 0;" @click="show = true">
				<view :class="{'active':JSON.stringify(selectData) === JSON.stringify(item)}" class="td" v-for="item in weeksData" :key="item">
					<view  class="text flex-center" :class="{'active2':JSON.stringify(nowData) === JSON.stringify(item)}">
						{{JSON.stringify(nowData) === JSON.stringify(item) ? '今': item.day}}
					</view>
					<view class="dian"></view>
				</view>
			</view>
		</view>
		<view class="box-3">
			<view class="info-1 flex-between">
				<view>
					预约时间
				</view>
				<view class="time">当前预约日期：3月4日</view>
			</view>
			<view class="info-2">
				<u-row   gutter="10">
					<u-col span="4" v-for="item in 2" :key="item">
						<view class="item">
							<view class="top">
								<view class="top-1">08:00~09:00</view>
								<view class="top-2">
									￥
									<text>80.00</text>
								</view>
							</view>
							<view class="bottom">1小时</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="item active">
							<view class="top">
								<view class="top-1">08:00~09:00</view>
								<view class="top-2">
									￥
									<text>80.00</text>
								</view>
							</view>
							<view class="bottom">1小时</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="item ban">
							<view class="top">
								<view class="top-1">08:00~09:00</view>
								<view class="top-2">
									￥
									<text>80.00</text>
								</view>
							</view>
							<view class="bottom">1小时</view>
						</view>
					</u-col>
									
				</u-row>
			</view>
		</view>
		
		<view class="box-4">
			<view class="info-1">场地参数</view>
			<view class="info-2">
				<view class="item flex-between">
					<view class="flex-align">
						<view class="name">排练厅</view>
						<view>长：22m</view>
					</view>
					<view>宽：15.7m</view>
					<view>高：15.7m</view>
				</view>
				<view class="item flex-between">
					<view class="flex-align">
						<view class="name">排  厅</view>
						<view>长：22m</view>
					</view>
					<view>宽：15.7m</view>
					<view>高：15.7m</view>
				</view>
			</view>
		</view>
		
		<view class="box-5">
			<view class="info-1">配套服务</view>
			<view class="info-2">
				(1)场地租赁区域和公共区域的建筑照明                         
				(2)场地租赁区域内走道和公共区域的清洁服务
				(3)在出入口处提供安保服务                                                              (4)免费提供小车停车位4个 
			</view>
		</view>
		
		<view class="footer flex-between">
			<view class="flex-align">
				<view class="price-1">
					￥<text>80.00</text>
				</view>
				<view class="price-2">/1小时</view>
			</view>
			<view class="btn" @click="href">立即预约</view>
		</view>
		
		<con-alert :show="show" @close="close" isFooter title="选择日期" height="60vh">
			<view class="time-popup">
				<view class="con">
					<view class="con-1 flex-align">
						<view @click="alertTime(-1)">上一月</view>
						<view class="now" @click="alertTime(0)">{{selectData.year}}年{{selectData.mouth}}月</view>
						<view @click="alertTime(1)">下一月</view>
					</view>
					<view class="con-2 flex-align">
						<view class="td " v-for="item in weekList" :key="item">
							{{item}}
						</view>
					</view>
					<view class="con-3" style="padding-bottom: 0;">
						<view @click="selectDay(item)" :class="{'active':JSON.stringify(selectData) === JSON.stringify(item)}" class="td" v-for="item in alertData" :key="item">
							<view  class="text flex-center" :class="{'active2':JSON.stringify(nowData) === JSON.stringify(item)}">
								{{JSON.stringify(nowData) === JSON.stringify(item) ? '今': item.day}}
							</view>
							<view class="dian" v-if="item.day"></view>
						</view>
					</view>
				</view>
				<view class="foo">
					<view class="time">
						{{selectData.year + '-' + selectData.mouth + '-' + selectData.day}}
					</view>
				</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue"
	export default {
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				weekList:['日','一','二','三','四','五','六'],
				weeksData:[],
				show:false,
				alertData:[],
				selectData:{},//选中日期
				nowData:{},//今天
			}
		},
		components:{
			conAlert
		},
		created() {
			this.init()
			this.alertTime(0)
		},
		methods: {
			close(){
				this.show = false
			},
			alertTime(num){
				let date = new Date()
				let list = []
				date.setMonth(date.getMonth() + 1+num)
				date.setDate(0)
				let totalDay = date.getDate()  //总天数
				let firstDayWeek = date.setDate(1)
				let date2 = new Date(firstDayWeek)
				for(let i = 0; i< date2.getDay() + totalDay;i++){
					if(i < date2.getDay()){
						list[i] = {
							day:'',
							mouth:'',
							year:''
						}
					}else{
						list[i] = {
							day:i - date2.getDay() + 1,
							mouth:date2.getMonth() + 1,
							year:date2.getFullYear()
						}
					}
				
				}
				this.alertData = list
			},
			init(){
				let date = new Date()
				//初始化
				this.selectData = {
					day:date.getDate(),
					mouth:date.getMonth() + 1,
					year:date.getFullYear()
				}
				this.nowData = {
					day:date.getDate(),
					mouth:date.getMonth() + 1,
					year:date.getFullYear()
				}
				let nowWeek = date.getDay()  //周几
				let nowDate = date.getDate() //日
				let list = []
				for(let i = 0; i< 7;i++){
					 let date2 = new Date()
					 if(i < nowWeek){
						 date2 = date2.setDate(date2.getDate() - (nowWeek - i))
					 }else if(i > nowWeek){
						  date2 = date2.setDate(date2.getDate() + (i - nowWeek))
					 }
					 let nextDate = new Date(date2)
					 list[i] = {
					 	day:nextDate.getDate(),
					 	mouth:nextDate.getMonth() + 1,
						year:date.getFullYear()
					 }
				}
				this.weeksData = list
			},
			href(){
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				} else {
					uni.navigateTo({
						url:'/page_venues/pages/venuesDetail/mettingDetail/collectInfo'
					})
				}
				
			},
			selectDay(data){
				this.selectData = data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control{
		padding-bottom: 120rpx;
	}
	.box-1{
		padding: 30rpx;
		box-sizing: border-box;
		.con{
			flex: 1;
			padding-right: 40rpx;
			.title{
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 20rpx;
			}
			.con-1{
				font-size: 20rpx;
				font-weight: bold;
				color: #7C642A;
				background: rgba(221, 188, 55, 0.5);
				border-radius: 2px;
				padding: 5rpx 10rpx;
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
			.con-2{
				font-size: 20rpx;
				font-weight: 500;
				color: #666666;
				margin-left: 20rpx;
			}
		}
		>image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.box-2{
		background: #F7F7F7;
		padding-bottom: 20rpx;
		.con-1{
			padding: 30rpx;
			font-size: 28rpx;
			color: #2F75FA;
			.now{
				background: #2F75FA;
				border-radius: 35rpx;
				color: #FFFFFF;
				padding: 12rpx 40rpx;
				margin: 0px 30rpx;
			}
		}
		.con-2{
			padding: 30rpx;
			padding-top: 0;
			border-bottom: 1px solid #E5E5E5;
		}
		.con-3{
			display: flex;
			padding: 30rpx;
			flex-wrap: wrap;
			padding-top: 20rpx;
			.td{
				padding-bottom:40rpx;
			}
		}
		.active{
			background: #2F75FA;
			border-radius: 10rpx;
			color: white !important;
			.dian{
				background-color: white !important;
			}
		}
		.td{
			width: 12.28%;
			margin: 0px 1%;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			font-weight: bold;
			color: #333333;
			position: relative;
			.active2{
				background: #2F75FA;
				border-radius: 50%;
				color: white;
			}
			.text{
				width: 46rpx;
				height: 46rpx;
			}
			.dian{
				position: absolute;
				width: 10rpx;
				height: 10rpx;
				bottom: 15rpx;
				background: #4FC47B;
				border-radius: 50%;
			}
		}
		
	}
	.box-3{
		padding:30rpx;
		.info-1{
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			.time{
				font-size: 22rpx;
				font-weight: 500;
				color: #D30B38;
				background: rgba(211, 11, 56, 0.3);
				border: 1px solid #D30B38;
				border-radius: 5px;
				padding: 6rpx 18rpx;
			}
		}
		.info-2{
			margin-top: 30rpx;
			/deep/ .u-row{
				flex-wrap: wrap;
			}
			.active{
				background: rgba(255, 142, 5, 0.1);
				border: 1px solid #FF8E05;
			}
			
			.item{
				margin-bottom: 20rpx;
				box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
				border-radius: 9px;
				overflow: hidden;
				.top{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 15rpx 0;
					.top-1{
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}
					.top-2{
						font-size: 24rpx;
						font-family: DIN;
						font-weight: bold;
						color: #FF8E05;
						margin-top: 10rpx;
						text{
							font-size: 36rpx;
						}
					}
				}
				.bottom{
					background: rgba(255, 143, 7, 0.2);
					text-align: center;
					font-size: 20rpx;
					font-weight: 500;
					color: #7C642A;
					padding: 10rpx 0;
				}
			}
			
			.ban{
				background: #F3F3F3;
				.top-1,.top-2{
					color: #999999 !important;
				}
				.bottom{
					background: rgba(153, 153, 153, 0.2) !important;
					color: #999999;
				}
			}
		}
	}
	.box-4{
		.info-1{
			padding: 0px 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
		.info-2{
			background: #F7F7F7;
			padding: 30rpx;
			.item{
				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
				margin-bottom: 20rpx;
				&:last-of-type{
					margin-bottom: 0;
				}
				.name{
					margin-right: 30rpx;
				}
			}
		}
	}
	
	.box-5{
		padding: 30rpx;
		.info-1{
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
		.info-2{
			font-size: 22rpx;
		}
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: white;
		padding: 20rpx 30rpx;
		.price-1{
			font-size: 25rpx;
			font-weight: 500;
			color: #FF4105;
			text{
				font-weight: 700;
				font-size: 38rpx;
			}
		}
		.price-2{
			font-size: 22rpx;
			font-weight: 500;
		}
		.btn{
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 20rpx 80rpx;
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 40rpx;
		}
	}
	.time-popup{
		.con{
			overflow: auto;
			.con-1{
				padding: 30rpx 0;
				padding-top: 0;
				font-size: 28rpx;
				color: #2F75FA;
				.now{
					background: #2F75FA;
					border-radius: 35rpx;
					color: #FFFFFF;
					padding: 12rpx 40rpx;
					margin: 0px 30rpx;
				}
			}
			.con-2{
				padding: 30rpx 0;
				padding-top: 0;
				border-bottom: 1px solid #E5E5E5;
			}
			.con-3{
				display: flex;
				padding: 30rpx 0;
				flex-wrap: wrap;
				padding-top: 20rpx;
				.td{
					padding-bottom:40rpx;
				}
			}
			.active{
				background: #2F75FA;
				border-radius: 10rpx;
				color: white !important;
				.dian{
					background-color: white !important;
				}
			}
			.td{
				width: 12.28%;
				margin: 0px 1%;
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				position: relative;
				.active2{
					background: #2F75FA;
					border-radius: 50%;
					color: white;
				}
				.text{
					width: 46rpx;
					height: 46rpx;
				}
				.dian{
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					bottom: 15rpx;
					background: #4FC47B;
					border-radius: 50%;
				}
			}
		
		}
		.foo{
			padding: 0 30rpx;
			.time{
				font-size: 22rpx;
				color: #999999;
				text-align: center;
				margin-bottom: 20rpx;
			}
		
		}
	}
</style>
